<template>
  <div class="onceInfo">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="17">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>会员中心</span>
              </div>
              <el-row>
                <el-col :span="6">
                  <img
                    src="http://theme.opencartdemo.cn/smart-3200-free/image/cache/placeholder-100x100.png"
                    alt
                    class="b"
                  />
                </el-col>
                <el-col :span="18">
                  <ul class="c">
                    <li style="list-style-type:none;height:32px">
                      <i class="el-icon-user-solid"> {{username}}</i>
                    </li>
                    <hr style="border:1px dashed #ccc;margin-bottom: 4px"/>
                    <li style="list-style-type:none;height:32px">
                      <i class="el-icon-phone"> {{phone}}</i>
                    </li>
                    <hr style="border:1px dashed #ccc;margin-bottom: 4px"/>
                    <li style="list-style-type:none;height:32px">
                      <i class="el-icon-message" style="font-weight: bolder"><span
                        style="font-weight: normal"> {{email}}</span></i>
                    </li>
                    <hr style="border:1px dashed #ccc;margin-bottom: 4px"/>
                  </ul>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card1">
              <div slot="header" class="clearfix">
                <span>我的账户</span>
              </div>
              <ul class="d">
                <li class="onceInfo-list">
                  <nuxt-link to="/accountInfo/accountInfo">编辑账户</nuxt-link>
                </li>
                <hr style="border:1px dashed #ccc;margin-bottom: 4px"/>

                <li class="onceInfo-list">
                  <nuxt-link to="/changpassword/changpassword">修改密码</nuxt-link>
                </li>
                <hr style="border:1px dashed #ccc;margin-bottom: 4px"/>

                <li class="onceInfo-list">
                  <nuxt-link to="/addressManager/addressManager">地址管理</nuxt-link>
                </li>
                <hr style="border:1px dashed #ccc;margin-bottom: 4px"/>
              </ul>
            </el-card>
          </el-col>
          <el-col :span="6" :offset="1">
            <account></account>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import account from "~/pages/account/account.vue";
  import topBar from '~/components/topBar.vue'

  export default {
    components: {
      account,
      topBar
    },
    data() {
      return {
        username: '',
        phone:'',
        email:''
      };
    },
    mounted() {
      this.username=this.$store.state.userInfo.username
      this.phone=this.$store.state.userInfo.phone
      this.email=this.$store.state.userInfo.email
    }
  };
</script>

<style lang="less">
  .onceInfo {
    height: 80vh;
    .box-card {
      border-radius: 12px;

      .c {
        margin-left: 10px;
        margin-top: 25px;
      }

      .b {
        width: 180px;
        height: 173px;
      }

      .el-card__body {
        padding: 0px;
      }
    }

    .box-card1 {
      border-radius: 12px;
      margin-top: 15px;
      height: 203px;

      .el-card__body {
        padding: 10px;
      }

      .onceInfo-list {
        list-style-type: none;
        height: 28px;

        a {
          text-decoration: none;
          color: #909399
        }
      }
    }
  }
</style>
